<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>KISSY Decorated Check Tree</title>
    <link href="/kissy/build/css/dpl/base.css" rel="stylesheet"/>
    <link href="../../../../src/button/assets/dpl.css" rel="stylesheet"/>
    <link href="../../assets/dpl.css" rel="stylesheet"/>
</head>
<body>
<div class="container">


    <h1>KISSY Decorated CheckTree</h1>


    <a href="javascript:void(0)" id="expandAll" class="ks-button">展开全部</a>&nbsp;
    <a href="javascript:void(0)" id="collapseAll" class="ks-button">关闭全部</a>

    <div id="treeContainer" style="width: 200px;margin: 20px 0;">

        <div id='root' class="ks-check-tree ks-tree-node ks-check-tree-node">

            <div class="ks-check-tree-node-row ks-tree-node-row ks-check-tree-row">
                <div class="ks-check-tree-expand-icon"></div>
                <div class="ks-check-tree-checked ks-check-tree-checked0 
                ks-tree-node-checked ks-tree-node-checked0"></div>
                <div class="ks-check-tree-icon"></div>
                <span class="ks-check-tree-content ks-tree-node-content">淘宝网</span>
            </div>

            <div class="ks-check-tree-children">
                <div class="ks-tree-node ks-check-tree-node">
                    <div class="ks-check-tree-node-row ks-tree-node-row">
                        <div class="ks-check-tree-node-expand-icon"></div>
                        <div class="ks-check-tree-node-checked ks-check-tree-node-checked0
                        ks-tree-node-checked ks-tree-node-checked0"></div>
                        <div class="ks-check-tree-node-icon"></div>
                        <span class="ks-check-tree-node-content ks-tree-node-content">收藏夹</span>
                    </div>
                    <div class="ks-check-tree-node-children">
                        <div class="ks-tree-node ks-check-tree-node">
                            <div class="ks-check-tree-node-row ks-tree-node-row">
                                <div class="ks-check-tree-node-expand-icon"></div>
                                <div class="ks-check-tree-node-checked ks-check-tree-node-checked0
                                ks-tree-node-checked ks-tree-node-checked0"></div>
                                <div class="ks-check-tree-node-icon"></div>
                                <span class="ks-check-tree-node-content ks-tree-node-content">收藏的宝贝</span>
                            </div>
                            <div class="ks-check-tree-node-children">

                            </div>
                        </div>
                        <div class="ks-tree-node ks-check-tree-node">
                            <div class="ks-check-tree-node-row ks-tree-node-row">
                                <div class="ks-check-tree-node-expand-icon"></div>
                                <div class="ks-check-tree-node-checked ks-check-tree-node-checked0
                                ks-tree-node-checked ks-tree-node-checked0"></div>
                                <div class="ks-check-tree-node-icon"></div>
                                <span class="ks-check-tree-node-content ks-tree-node-content">收藏的店铺</span>
                            </div>
                            <div class="ks-check-tree-node-children">

                            </div>
                        </div>
                    </div>
                </div>

                <div class="ks-tree-node ks-check-tree-node">
                    <div class="ks-check-tree-node-row ks-tree-node-row">
                        <div class="ks-check-tree-node-expand-icon"></div>
                        <div class="ks-check-tree-node-checked ks-check-tree-node-checked0
                        ks-tree-node-checked ks-tree-node-checked0"></div>
                        <div class="ks-check-tree-node-icon"></div>

                        <span class="ks-check-tree-node-content ks-tree-node-content">我要买</span>
                    </div>
                    <div class="ks-check-tree-node-children">

                    </div>
                </div>
            </div>
        </div>

    </div>

    <hr/>


    <script src="/kissy/build/seed-debug.js"></script>
    <script src="/kissy/src/package.js"></script>
    <script>
        KISSY.use("tree,node", function (S, Tree,$) {

            var tree = new Tree.CheckTree({
                content: "淘宝网",
                // showRootNode:false,
                srcNode: "#root"
            });

            tree.render();

            tree.on("click", function (e) {
                S.log("action : " + e.target.get("content"));
            });

            $("#expandAll").on("click", function () {
                tree.expandAll();
            });

            $("#collapseAll").on("click", function () {
                tree.collapseAll();
            });
        });
    </script>
</div>
</body>
</html>